<template>
  <div class="table-box">
    <div class="table-title" v-if="tableTitle">{{ tableTitle }}</div>
    <div class="plain-table">
      <el-table :data="tableData" class="custom-table">
        <el-table-column :prop="cell.prop" :label="cell.label" :width="cell.width" v-for="cell in tableConfigData"
          :key="cell.prop">
          <!-- 固定费用 -->
          <template #default="scope" v-if="cell.prop === 'constantCost'">
            <previewAndInput v-model="scope.row.constantCost" @updateTotal="updateTotal(scope.row)" />
          </template>
          <!-- 费率 -->
          <template #default="scope" v-if="cell.prop === 'priceRate'">
            <div class="custom-cell">
              <previewAndInput v-model="scope.row.priceRate" @updateTotal="updateTotal(scope.row)" />%
            </div>
          </template>
          <!-- 改变星级 -->
          <template #default="scope" v-if="cell.prop === 'changeStar'">
            <el-button link @click="onClickChangeStar(scope.row)" class="my-button">修改星級</el-button>
          </template>
          <!-- 已开通渠道查看 -->
          <template #default="scope" v-if="cell.prop === 'sourceActive'">
            <el-button link @click="onClickCheckSource(scope.row)" class="my-button">點擊查看</el-button>
          </template>
          <!-- 查看商户详情 -->
          <template #default="scope" v-if="cell.prop === 'checkDetail'">
            <el-button link @click="onClickCheckDetail(scope.row)" class="my-button">詳情</el-button>
          </template>
          <!-- 对接文档下载 -->
          <template #default="scope" v-if="cell.prop === 'referUse'">
            <el-upload ref="uploadDom" class="upload-btn" :limit="1" :on-exceed="handleExceed" :on-remove="onFileRemove"
              :auto-upload="false" accept=".doc,.docx" :on-change="onFileChange" @click="recordActiveRow(scope.row)">
              <template #trigger>
                <el-button link v-show="!scope.row.uploadFile" class="my-button">上传</el-button>
              </template>
            </el-upload>
          </template>
          <!-- 对接文档查看 -->
          <template #default="scope" v-if="cell.prop === 'viewFile'">
            <a :href="scope.row.viewFile" target="_blank">在线文档</a>
          </template>
          <!-- 前往更新费用 操作 -->
          <template #default="scope" v-if="cell.prop === 'costUpdate'">
            <el-button link @click="onClickToUpdateCost(scope.row)" class="my-button">更新</el-button>
          </template>
          <!-- 确认更新费用 操作 -->
          <template #default="scope" v-if="cell.prop === 'confirmCostUpdate'">
            <el-button link @click="onClickConfirmUpdateCost(scope.row)" class="my-button">確認更新</el-button>
          </template>
          <!-- 停用/恢复 操作 -->
          <template #default="scope" v-if="cell.prop === 'controlUse'">
            <el-button link @click="onClickControlUse(scope.row)" class="my-button">{{ scope.row.controlUse
              }}</el-button>
          </template>
          <!-- 通过/拒绝 操作 -->
          <template #default="scope" v-if="cell.prop === 'verify'">
            <template v-if="scope.row.statusValue === 1">
              <el-button link @click="onClickVerify(scope.row, 2, '通过')" class="my-button">通过</el-button>
              <el-button link @click="onClickVerify(scope.row, 3, '拒绝')" class="my-button">拒绝</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-wrap" v-if="pageInfo.totalPage > 0">
      <div class="page-button prev-page_button" @click="onPrevPage">上一頁</div>
      <div class="page-info">
        <span class="current-page">{{ pageInfo.currentPage }}</span>/<span class="total-page">{{ pageInfo.totalPage
          }}</span>
      </div>
      <div class="page-button next-page_button" @click="onNextPage">下一頁</div>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from "element-plus";
import previewAndInput from './previewAndInput.vue';

const props = defineProps({
  tableData: {
    type: Array,
    required: true,
  },
  tableConfigData: {
    type: Array,
    required: true,
  },
  pageInfo: {
    type: Object,
    default: () => ({
      currentPage: 0,
      totalPage: 0,
    }),
  },
  tableTitle: {
    type: String,
    default: "",
  },
});

const emit = defineEmits([
  "changeStar",
  "chooseFile",
  "removeFile",
  "controlUse",
  "verify",
  "prevPage",
  "nextPage",
  "toUpdateCost",
  "confirmUpdateCost",
  "updateTotal",
  "checkSource",
  "checkDetail"
]);

const onClickChangeStar = (row) => {
  emit("changeStar", row);
};
const onClickCheckSource = (row) => {
  emit("checkSource", row);
}
const onClickCheckDetail = (row) => {
  emit("checkDetail", row);
}

const handleExceed = () => {
  ElMessage.warning("只能上传一个文件!");
};
const onFileChange = (file) => {
  emit("chooseFile", {
    file,
    busiId: activeRow,
  });
};
const onFileRemove = (file) => {
  emit("removeFile", {
    file,
    busiId: activeRow,
  });
};
const onClickControlUse = (row) => {
  emit("controlUse", row);
};
const onClickVerify = (row, action, text) => {
  // 弹出询问框
  ElMessageBox.confirm(`${text}?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      emit("verify", row, action);
    })
    .catch(() => { });
};
const onClickToUpdateCost = (row) => {
  emit("toUpdateCost", row);
};
const onClickConfirmUpdateCost = (row) => {
  emit("confirmUpdateCost", row);
};
let activeRow = null;
const recordActiveRow = (e) => {
  activeRow = e.busiId;
};

const onPrevPage = () => {
  emit("prevPage");
};
const onNextPage = () => {
  emit("nextPage");
};
const updateTotal = (row) => {
  emit("updateTotal", row);
}
</script>

<style scoped lang="scss">
.my-button {
  color: #3b72ad;
}

.table-title {
  padding: 0 29px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.plain-table {
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0px 4px 10px 0px #0000004c;
  padding: 0 29px 48px 29px;

  :deep(.custom-table) {
    .el-table__inner-wrapper {
      &::before {
        border-bottom: 1px solid #979797;
      }

      .el-table__header-wrapper {
        border-bottom: 2px solid #3d3d3d;

        .el-table__header {
          height: 62px;

          thead {
            font-size: 14px;
            color: #3d3d3d;

            .cell {
              font-weight: 400;
            }
          }
        }
      }

      .el-table__body-wrapper {
        .el-table__body {
          color: #3b72ad;
          font-size: 14px;

          tr {
            height: 49px;

            .cell {
              font-weight: 400;
            }
          }

          td.el-table__cell {
            border-bottom: 1px solid #979797;
          }
        }
      }
    }

    .upload-btn {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .el-upload-list {
        width: 100%;
        margin-top: 0;
      }
    }
  }
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 55px;
  color: #666666;
  column-gap: 55px;

  .page-button {
    width: 82px;
    height: 34px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border: 0.5px solid #cbcbcb;
    line-height: 34px;
    text-align: center;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }

  .page-info {
    .current-page {
      color: #3b72ad;
    }
  }
}

.custom-cell {
  display: flex;
  align-items: center;
}
</style>
